<template>
  <div class="container">
    <div class="container-header">
      <el-input
        placeholder="请输入歌曲"
        v-model="songName"
        suffix-icon="el-icon-search"
        clearable
        @change="handleChange(songName)"
      >
      </el-input>
    </div>
    <div class="container-content">
      <el-table :data="this.$store.state.songList" style="width: 100%">
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column
          width="250"
          label="歌曲"
          property="SongName"
        ></el-table-column>
        <el-table-column
          width="150"
          label="歌手"
          property="SingerName"
        ></el-table-column>
        <el-table-column align="right">
          <template slot-scope="{ row: { AlbumID, FileHash } }">
            <el-button
              size="mini"
              @click="handleBo(AlbumID, FileHash)"
              type="text"
              >播放</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="{ row: { AlbumID, FileHash } }">
            <el-button
              size="mini"
              @click="handleEdit(AlbumID, FileHash)"
              type="text"
              >FileHash</el-button
            >
          </template>
        </el-table-column>

        <el-table-column align="right">
          <template slot-scope="{ row: { AlbumID, HQFileHash } }">
            <el-button
              size="mini"
              @click="handleEdit(AlbumID, HQFileHash)"
              type="text"
              >HQFileHash</el-button
            >
          </template>
        </el-table-column>
        <el-table-column align="right">
          <template slot-scope="{ row: { AlbumID, SQFileHash } }">
            <el-button
              size="mini"
              @click="handleEdit(AlbumID, SQFileHash)"
              type="text"
              >SQFileHash</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer" v-if="this.mp3">
      <audio controls :autoplay="isBo">
        <source :src="mp3" type="audio/mpeg" />
        您的浏览器不支持 audio 元素。
      </audio>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import music from "_c/music";
export default {
  data() {
    return {
      songName: "",
      tableData: [],
      mp3: "",
      isBo: false,
    };
  },
  components: {
    music,
  },
  mounted() {},
  methods: {
    async handleChange(name) {
      this.$store.dispatch("getSongList", name);
    },
    async handleEdit(id, hash) {
      if (id) {
        if (hash) {
          console.log(id, hash);
          await this.$store.dispatch("getDownLink", { id, hash });
          let play_url = this.$store.state.play_url;
          if (!play_url) {
            this.$message.error("获取到的链接为空");
            return;
          } else {
            window.open(play_url);
          }
        } else {
          this.$message.error("无此格式");
        }
      } else {
        this.$message.error("无版权");
      }
    },
    async handleBo(id, hash) {
      if (id) {
        if (this.isBo) {
          this.isBo = !this.isBo;
          this.mp3 = "";
          await this.$store.dispatch("getDownLink", { id, hash });
          let play_url = this.$store.state.play_url;
          if (!play_url) {
            this.$message.error("获取到的链接为空,播放失败");
            return;
          }
          this.mp3 = play_url;
          this.isBo = !this.isBo;
          return
        }
        await this.$store.dispatch("getDownLink", { id, hash });
        let play_url = this.$store.state.play_url;
        if (!play_url) {
          this.$message.error("获取到的链接为空,播放失败");
          return;
        }
        this.mp3 = play_url;
        this.isBo = !this.isBo;
      } else {
        this.$message.error("无版权");
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  position: relative;
  .container-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70px;
    .el-input {
      width: 400px;
    }
  }
  .container-content {
    margin: 0 95px;
  }
  .footer {
    position: fixed;
    bottom: 5px;
  }
}
</style>
